<template>
  <div style="padding-left: 10px">
    <h2 style="padding-right: 1230px;color: #999999">优惠券创建</h2><hr>
    <div >
      <el-row style="width: 2400px" >
        <el-col  :span="4" v-for="(o, index) in couponTypeData" :key="o.id" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }" >
            <div style="padding: 19px;">
              <span  style="margin: 25px">{{o.name}}</span>
              <span  style="margin: 15px"><el-button size="small" disabled type="primary" plain>店铺券</el-button></span>
              <span><el-button disabled type="primary" size="small" plain>商品券</el-button></span>
              <div style="margin-top: 10px">
                <span style="left: 35px;color: #4275a8">{{o.details}}</span><br>
              </div>
              <div class="coupon-label" style="margin-top: 10px;margin-right: 30px">
                <span class="label-text" style="margin-top: 15px;">{{o.remark}}</span>
              </div>
              <div style="margin-top: 15px;padding-left: 265px">
                <el-button @click="openAddCoupon(o.id,o.name)" size="medium" style="margin-left: 16px;">创建</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
<!--    优惠券嵌套表单  -->
      <el-drawer
          title="优惠券中心/新建券"
          :before-close="handleClose"
          :visible.sync="dialog"
          direction="ltr"
          size="50%"
          custom-class="demo-drawer"
          ref="drawer"
      >

        <div class="panda">
          <span style="padding-right: 723px;color: #333333">基本信息</span><br><br>
          <el-form :model="form">
            <el-form-item label="推广渠道" :label-width="formLabelWidth">
              <el-select v-model="form.couponTypeId" placeholder="请选择活动区域">
                <el-option v-for="(o, index) in couponTypeData" @change="couponTypeChanges(o.name)" :key="o.id"  :label="o.name" :value="o.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="优惠券活动名称" :label-width="formLabelWidth">
              <el-input  v-model="form.couponTypeName" autocomplete="off"></el-input>
              <span style="color: blueviolet">该名称仅用于管理，不对买家展示</span>
            </el-form-item>
            <el-form-item label="适用范围" :label-width="formLabelWidth">
              <input type="radio" id="1" value="1" v-model="form.scropCouponState">
              <label style="padding-right: 25px;color: #333333" for="option1">店铺</label>
              <input type="radio" id="2" value="2" v-model="form.scropCouponState">
              <label for="option2" style="color: #333333">商品</label>
              <!-- 根据选中的单选框值显示对应的div -->
              <div v-if="form.scropCouponState === '2'">
                <div id="div1">
                  <input type="radio" id="a" value="option1" v-model="selectedOption">
                  <label  for="option1" style="padding-right: 30px;margin-top: 10px;color: #333333">手动添加 <el-tag type="success">推荐</el-tag></label>

                  <input type="radio" id="b" value="option2" v-model="selectedOption">
                  <label style="color: #333333" for="option2">批量上传</label>

                  <!-- 根据选中的单选框值显示对应的div -->
                  <div v-if="selectedOption === 'option1'">
                    <div id="div2">
                      <el-button @click="openAddGoodsId" icon="el-icon-plus" type="primary" plain>添加商品</el-button>
                    </div>
                  </div>
                  <div v-else-if="selectedOption === 'option2'">
                    <div id="div3">
                      <el-button @click="openAddGoodsId" icon="el-icon-plus" type="primary" plain>批量上传</el-button>
                    </div>
                  </div>

                </div>
              </div>
<!--              <div v-else-if="form.couponScopeState === '2'">
                <div id="div2">这是选项2的内容</div>
              </div>-->
            </el-form-item>
            <el-form-item label="可领取时间" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="getTime"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="可使用时间" :label-width="formLabelWidth">
              <el-radio style="margin-left: -120px" v-model="form.couponDaysState" @change="sleectOne" :disabled="selectDisable" value="1" label="1">
                  <span>时间范围：</span>
                  <el-date-picker
                      :disabled="selectDisablea"
                      v-model="timeScope"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期">
                  </el-date-picker>
              </el-radio>
              <br><br>
              <el-radio style="margin-left: -320px" v-model="form.couponDaysState"  @change="sleectTwo"  :disabled="selectDisableae" value="2" label="2">
                <spn>可用天数：</spn>
                <el-input-number :disabled="selectDisablee" controls-position="right" v-model="form.days" @change="handleChange" :min="0" :max="10"></el-input-number>
                <span style="color: red">天内可用</span>
              </el-radio>

            </el-form-item><hr>
            <span style="padding-right: 723px;color: #333333">优惠规则</span><br><br>
            <el-form-item label="满减规则" :label-width="formLabelWidth">
              <div id="d1">
                <el-col :span="1" style="padding-left: 100px;margin-top: 24px">
                  <el-input-number :min="0" :max="99999" v-model="form.fullNum"></el-input-number>
                </el-col>
                <el-col class="line" :span="12" style="margin-top: 22px">=================--------</el-col>
                <el-col :span="1" style="margin-top: 24px">
                  <el-input-number :min="0" :max="99999"  v-model="form.subtract"></el-input-number>
                </el-col>
              </div>

            </el-form-item>
            <el-form-item label="发行总量" :label-width="formLabelWidth">
              <el-radio style="padding-right: 40px" v-model="form.couponIssuanceState"  label="1">不限</el-radio>
              <el-radio style="padding-right: 60px" v-model="form.couponIssuanceState" label="2" @change="bb">最多
                <el-input-number v-model="form.totalIssuance" controls-position="right"  :min="0" :max="99999999" placeholder="请输入正整数"></el-input-number>张
              </el-radio>
            </el-form-item>
            <el-form-item label="每人限领" :label-width="formLabelWidth">
              <el-radio style="padding-right: 40px" v-model="form.collarLiitationState"  label="1">不限</el-radio>
              <el-radio style="padding-right: 60px" v-model="form.collarLiitationState" label="2" @change="bb">最多
                <el-input-number v-model="form.collarLiitation" controls-position="right" :min="0" :max="99999999" placeholder="请输入正整数"></el-input-number>张
              </el-radio>
            </el-form-item>
          </el-form>
          <div class="demo-drawer__footer">
            <el-button @click="cancelForm">取 消</el-button>
            <el-button type="primary" @click="addGoodsCoupon" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button>
          </div>
<!--        我嵌套了表格  -->
          <div >
            <el-drawer

                title="我是里面的"
                :append-to-body="true"
                :before-close="handleClose"
                :visible.sync="table"
                size="40%">
              <el-button icon="el-icon-arrow-left" @click="cancelTableFrom">返回</el-button>
              <el-table
                  ref="multipleTable"
                  :data="gridData"
                  tooltip-effect="dark"
                  style="width: 100%"
                  v-model="goodsId"
                  @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="cropNumbering"
                    label="商品编号"
                    width="220">
                </el-table-column>
                <el-table-column
                    prop="cropName"
                    label="商品名称"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="价格"
                    show-overflow-tooltip>
                  <template v-slot="scope">
                    {{scope.row.price}}元
                  </template>
                </el-table-column>
                <el-table-column
                    prop="num"
                    label="库存"
                    show-overflow-tooltip>
                </el-table-column>
              </el-table>
              <el-button style="margin-top: 20px" size="mini" type="primary" @click="addGoodsId">确定</el-button>
            </el-drawer>
          </div>
        </div>
      </el-drawer>
    </div>

  </div>
</template>
<script>
export default {
  name: "CouponView",
  data(){
    return{
      dialog: false,
      loading: false,
      selectDisable:false,
      selectDisableae:false,
      selectDisablea:true,
      selectDisablee:true,
      couponTypeData:[],
      direction: 'ltr',
      form:{
        couponTypeId:'',
        days:1,
        goodsId:[]
      },
      formLabelWidth:'120px',
      couponScopeData:[],
      selectedOption:'',
      table:false,
      gridData:[],
      multipleSelection: [],
      goodsId:[],
      getTime:[],
      timeScope:[],
    }
  },methods:{
    couponTypeChanges(couponTypeName){
      alert(couponTypeName)
      this.form.couponTypeName=couponTypeName
    },
      couponTypeList(){
        this.axios.post("http://172.20.10.5:8003/api/sys-coupon/couponTypeList").then(res=>{
          this.couponTypeData=res.data
        })
      },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要提交表单吗？')
          .then(_ => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
          .catch(_ => {});
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    },/*打开添加优惠券嵌套表单*/
    openAddCoupon(couponTypeId,couponTypeName){
      this.dialog=true
      this.form.couponTypeId=couponTypeId;
      this.form.couponTypeName=couponTypeName;

    },/*去字典表中查询优惠券的适用范围*/
    couponScopeList(){
      this.axios.post("http://172.20.10.5:8003/api/sys-coupon/couponScopeList").then(res=>{
        this.couponScopeData=res.data
        console.log(res.data)
      })
    },/*打开手动添加商品嵌套表给form中的goodId赋值*/
    openAddGoodsId(){
      this.table=true;
      this.goodsList();
    },cancelTableFrom(){
      this.table=false
    },goodsList() {
      this.axios.post("http://172.20.10.5:8003/api/sys-crop/goodsList2").then(res=>{
        this.gridData=res.data
      })
    },handleSelectionChange(val) {
      this.goodsId=[]
      this.multipleSelection = val;
      //alert(this.multipleSelection)
      this.multipleSelection.forEach(item => {
        this.goodsId=this.goodsId+item.id+","
      })
      this.goodsId=this.goodsId.substring(0,this.goodsId.length-1)
      this.form.goodsId=this.goodsId
      //alert(this.goodsId)
    },pickerOptions: {
      shortcuts: [{
        text: '最近一周',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近一个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          picker.$emit('pick', [start, end]);
        }
      }, {
        text: '最近三个月',
        onClick(picker) {
          const end = new Date();
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          picker.$emit('pick', [start, end]);
        }
      }]
    },sleectTwo(){
      this.selectDisable=false;
      this.selectDisablee=false
      this.selectDisablea=true
      this.timeScope=null
    },
    sleectOne(){
      this.selectDisableae=false;
      this.selectDisablee=true;
      this.selectDisablea=false
      this.form.days=''
    },handleChange(value) {
      console.log(value);
    },/*赋值成功*/
    addGoodsId(){
      //alert(this.form.goodsId)
      this.$message.success("选择成功！！！");
      this.couponTypeList();
    },addGoodsCoupon(){
      this.form.startTime=this.getTime[0];
      this.form.endTime=this.getTime[1];

      if(this.form.couponScopeState==1){
        this.form.goodsId=[]
      }
      if(this.form.couponDaysState==1){
        this.form.dayTime1=this.timeScope[0];
        this.form.dayTime2=this.timeScope[1];
      }
      else{
        this.form.dayTime1=null;
        this.form.dayTime2=null;
      }
      if(this.form.couponIssuanceState==1){
        this.form.totalIssuance=null;
      }
      if(this.form.collarLiitationState==1){
        this.form.collarLiitation=null;
      }
      //alert(JSON.stringify(this.form));
      this.axios.post("http://172.20.10.5:8003/api/sys-coupon/addGoodsCoupon",this.form).then(res=>{
        if(res.data=="success"){
          this.$message.success("添加成功！！！");
          this.dialog=false;
          this.couponTypeList();
        }
        else{
          this.$message.error("添加失败！！！");
        }
      })
    },
  },created() {
    this.couponTypeList();
    this.couponScopeList();
  }
}
</script>

<style scoped>
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .coupon-label {
    display: inline-block;
    background-color: #ff4600; /* 红色 */
    color: white;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
  }

  .label-text {
    font-weight: bold;
  }
  .clearfix:after {
    clear: both
  }

  .align-span {
    align-self: center; /* 在垂直方向上居中对齐 */
    margin-left: auto; /* 向右对齐 */
  }
 .el-card{
   background-color: #de79a8;
   box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
 }
 .demo-drawer__content{
   background-color: #f0f9eb;
 }
 #div1{
   border:1px solid #ee77b2;background: #fbebf5;
   width: 400px;
   height: 100px;
   padding-right: 220px;
 }
  .el-table {
    transition: opacity 0.3s ease-in-out;
  }

  .el-table:hover {
    opacity: 0.8; /* 设置透明度的动画效果 */
  }
  #d1{
    border:1px solid #ee77b2;background: #fbebf5;
    width: 400px;
    height: 100px;
    padding-right: 220px;
  }
  .el-table {
    transition: opacity 0.3s ease-in-out;
  }

  .el-table:hover {
    opacity: 0.8; /* 设置透明度的动画效果 */
  }
  .el-date-picker{
    background: #999999;
  }

  .panda {
    width: 885px; /* 设置div的宽度 */
    height: 915px; /* 设置div的高度 */
    background-image: url('/Users/zhaowenting/Pictures/WechatIMG2.jpg'); /* 小熊图片的路径 */
    background-size: cover; /* 背景图片覆盖整个div区域 */
    background-position: center; /* 背景图片居中显示 */
    background-repeat: no-repeat; /* 背景图片不重复 */
  }
  .panda2 {
    width: 710px; /* 设置div的宽度 */
    height: 980px; /* 设置div的高度 */
    background-image: url('/Users/zhaowenting/Pictures/WechatIMG1.jpg'); /* 小熊图片的路径 */
    background-size: cover; /* 背景图片覆盖整个div区域 */
    background-position: center; /* 背景图片居中显示 */
    background-repeat: no-repeat; /* 背景图片不重复 */
  }

/*透明*/
  .transparent-btn {
    background-color: transparent;
  }
</style>